<template>
  <div class="main-container">
    <!-- 左侧模型侧边栏 -->
    <van-sidebar v-model="activeIndex" @change="onModelChange">
      <van-sidebar-item
          v-for="(item, index) in modelOptions"
          :key="item.value"
          :title="item.text"
      />
    </van-sidebar>

    <!-- 右侧主内容区 -->
    <div class="content-area">
      <h2 class="content-title">当前模型：{{ currentModelName }}</h2>

      <!-- 上传控制区 -->
      <div class="upload-controls">
        <label class="upload-label">
          <van-icon name="photograph" class="upload-icon" />
          <span>选择影像</span>
          <input
              type="file"
              accept="image/*"
              @change="onFileChange"
              hidden
          />
        </label>

        <van-button
            type="primary"
            block
            :disabled="!selectedFile || loading"
            @click="mockUpload"
            :loading="loading"
            loading-text="AI分析中..."
        >
          使用 {{ currentModelName }} 分析
        </van-button>
      </div>

      <!-- 固定展示区域 -->
      <div class="display-container">
        <!-- 空状态 -->
        <div v-if="!previewUrl && !uploadSuccess" class="empty-state">
          <van-icon name="photo" class="empty-icon" />
          <p class="empty-text">等待上传影像</p>
        </div>

        <!-- 单图预览模式 -->
        <div v-show="previewUrl && !uploadSuccess" class="single-preview">
          <img :src="previewUrl" class="preview-image" />
          <p class="file-info">
            {{ selectedFile?.name }} ({{ formatFileSize }}MB)
          </p>
        </div>

        <!-- 三栏结果模式 -->
        <div v-show="uploadSuccess" class="result-grid">
          <div class="grid-item original">
            <h3>原始影像</h3>
            <img :src="previewUrl" class="grid-image" />
          </div>

          <div class="grid-item result">
            <h3>分析结果</h3>
            <img :src="processedUrl" class="grid-image highlighted" />
          </div>

          <div class="grid-item report">
            <h3>诊断报告</h3>
            <div class="report-content">
              <div class="report-row">
                <span>模型类型：</span>
                <strong>{{ currentModelName }}</strong>
              </div>
              <div class="report-row">
                <span>分析耗时：</span>
                <strong class="success">1.34s</strong>
              </div>
              <div class="report-row">
                <span>置信指数：</span>
                <strong class="success">98.6%</strong>
              </div>
              <div class="report-row">
                <span>异常标记：</span>
                <strong class="danger">3处病灶</strong>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onBeforeUnmount } from 'vue'
import { showToast } from 'vant'

// 模型配置
const modelOptions = [
  { text: '器官识别', value: 'organ' },
  { text: '病灶划分', value: 'lesion' },
]

// 核心状态
const activeIndex = ref(0)
const selectedFile = ref(null)
const previewUrl = ref('')
const processedUrl = ref('')
const loading = ref(false)
const uploadSuccess = ref(false)

// 计算属性
const currentModelName = computed(() =>
    modelOptions[activeIndex.value]?.text || '未知模型'
)

const formatFileSize = computed(() =>
    (selectedFile.value?.size / 1024 / 1024).toFixed(2)
)

// 文件处理
function onFileChange(event) {
  const file = event.target.files[0]
  if (!file) return

  // 文件验证
  const validTypes = ['image/jpeg', 'image/png']
  const MAX_SIZE_MB = 5

  if (!validTypes.includes(file.type)) {
    showToast('仅支持JPEG/PNG格式')
    event.target.value = ''
    return
  }

  if (file.size > MAX_SIZE_MB * 1024 * 1024) {
    showToast(`文件需小于${MAX_SIZE_MB}MB`)
    event.target.value = ''
    return
  }

  selectedFile.value = file
  previewUrl.value = URL.createObjectURL(file)
  uploadSuccess.value = false
}

// 模拟分析处理
async function mockUpload() {
  if (loading.value || !selectedFile.value) return

  loading.value = true
  try {
    // 模拟处理延时
    await new Promise(resolve => setTimeout(resolve, 1500))

    // 生成处理结果（示例使用同一图片）
    processedUrl.value = previewUrl.value
    uploadSuccess.value = true
    showToast('分析完成')
  } finally {
    loading.value = false
  }
}

// 内存清理
onBeforeUnmount(() => {
  if (previewUrl.value) URL.revokeObjectURL(previewUrl.value)
  if (processedUrl.value) URL.revokeObjectURL(processedUrl.value)
})

// 模型切换
function onModelChange(index) {
  activeIndex.value = index
  showToast(`已切换至：${modelOptions[index].text}`)
}
</script>

<style scoped>
.main-container {
  display: flex;
  max-height: 90vh;
  background: #f8fafc;
}

.van-sidebar {
  width: 15vw;
  height: 90vh;
  flex-shrink: 0;
  background: #fff;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.content-area {
  flex: 1;
  padding: 2rem;
  max-width: 90vw;
  max-height: 90vh;
}

.upload-controls {
  margin: 2rem 0;
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.upload-label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  border: 2px dashed #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.upload-label:hover {
  border-color: #3b82f6;
  background: #f0f4ff;
}

/* 固定展示区域 */
.display-container {
  align-items: center;
  justify-content: center;

  height: 50vh;

  background: white;
  border-radius: 12px;
  padding: 2rem;
  margin: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 空状态样式 */
.empty-state {
  height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
}

.empty-icon {
  font-size: 4rem;

  opacity: 0.6;
}

.empty-text {
  font-size: 1.2rem;
}

.single-preview{
  display: flex;
  flex-direction: column;
  max-height: 40vh;

  align-items: center;
  justify-content: center;
}

.preview-image{
  height: 58vh;
  width: 58vh;
}

/* 三栏网格布局 */
.result-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  height: 100%;
}

.grid-item {
  background: #f8fafc;
  border-radius: 8px;
  padding: 1.5rem;

  height: 40vh;
}

.grid-item h3 {
  color: #1e40af;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #bfdbfe;
}

.grid-image {
  width: 100%;
  height: 80%;
  object-fit: contain;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
}

.highlighted {
  border-color: #3b82f6;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.2);
}

/* 诊断报告样式 */
.report-content {
  display: grid;
  gap: 1rem;
}

.report-row {
  display: flex;
  justify-content: space-between;
  padding: 0.8rem;
  background: white;
  border-radius: 6px;

  height: 5.7vh;
}

.report-row span {
  color: #64748b;
}

.success { color: #16a34a; }
.danger { color: #dc2626; }

/* 响应式设计 */
@media (max-width: 60vw) {
  .result-grid {
    grid-template-columns: 1fr;
  }

  .grid-image {
    height: 40vh;
  }

  .content-area {
    padding: 1rem;
    max-width: 100%;
  }

}
</style>